import React, { useCallback, useState } from 'react'
import {
  View, Text, Image, Swiper, SwiperItem
} from '@tarojs/components'
import style from './Description.module.scss'

const RenderImage = ({ src }) => <Image src={src} className={style.image} />
const RenderDot = ({ activeIndex, index }) => <View className={activeIndex === index ? style.active_dot : style.dot} />
const RenderDotView = ({ titles, index }) => (
  <View className={style.dot_view}>
    {titles.map((item, i) => <RenderDot key={item} activeIndex={index} index={i} />)}
  </View>
)

const Description = ({ titles, descs, sources }) => {
  const [index, setIndex] = useState(0)

  const onChangeSwiper = useCallback(e => setIndex(e.detail.current), [])

  return (
    <View className={style.body}>
      <Swiper
        className={style.swiper_view}
        autoplay
        interval={3000}
        onChange={onChangeSwiper}
      >
        {
          Array.isArray(sources) && sources.map((src, i) => (
            <SwiperItem key={`${src}-${i}`}>
              <View className={style.card}>
                <View className={style.top}>
                  <RenderImage src={src} />
                </View>
                <View className={style.desc_view}>
                  <Text className={style.main}>{titles[index]}</Text>
                  <Text className={style.desc}>{descs[index]}</Text>
                </View>
              </View>
            </SwiperItem>
          ))
        }
      </Swiper>
      <RenderDotView titles={titles} index={index} />
    </View>
  )
}

export default Description
